<template>
    <div class="search-course">
        <!-- 搜索框 -->
        <div class="search-box">
            <img class="search-box-icon" src="../../assets/img/search.svg" alt>
            <input
                type="text"
                class="search-input"
                v-model="keywords"
                @confirm="inputConfirm"
                placeholder="请输入搜索内容"
            >
            <span class="search-cancel" @click="cancel">取消</span>
        </div>
        <!-- 热门搜索 -->
        <div class="hot-search">
            <p class="title">热门搜索</p>
            <span
                class="search-hot-tag"
                @click="search(item)"
                v-for="(item, index) in hots"
                :key="index"
            >{{item}}</span>
        </div>
        <!-- 课程列表 -->
        <div class="course-list" v-if="courseList && courseList.length > 0">
            <p class="title">相关课程</p>
            <course-card
                v-for="(item, index) in courseList"
                :key="index"
                @goVideoList="goVideoList"
                :course="item"
            ></course-card>
        </div>
        <div class="course-list" v-if="noneCourse">暂无相关课程</div>
    </div>
</template>

<script>
// import { formatTime } from '@/utils/index'
import courseCard from "@/components/courseCard.vue";
const staticHots = [
    "react",
    "go",
    "vue",
    "小程序",
    "php",
    "vue.js",
    "python",
    "人工智能",
    "区块链",
    "larveral",
    "mysql"
];
export default {
    components: {
        courseCard
    },
    data() {
        return {
            keywords: "",
            hots: [
                "react.js",
                "go",
                "小程序",
                "php",
                "vue.js",
                "python",
                "人工智能",
                "区块链"
            ],
            courseList: [],
            noneCourse: false
        };
    },
    methods: {
        inputConfirm() {
            this.search(this.keywords);
        },
        search(v) {
            if (!v) {
                return wx.showToast({
                    title: "请输入搜索内容",
                    icon: "none",
                    mask: true
                });
            }
            this._getCourseList({ page_size: 10, page: 1, keywords: v });
        },
        cancel() {
            wx.navigateBack({ delta: 1 });
        },
        // 跳转至课程详情
        goVideoList(obj) {
            wx.navigateTo({
                url: `./../videoList/main?id=${obj.id}`
            });
        },
        // 获取order列表
        _getCourseList(data) {
            this.$http.course.getCourseList(data).then(res => {
                this.courseList = res.data;
                this.noneCourse = !(res.data.length > 0);
            });
        }
    },
    created() {
        for (let i = 0; i < Math.floor(Math.random() * 10); i++) {
            staticHots.splice(Math.floor(Math.random() * 10), 1);
        }
        this.hots = staticHots;
    },
    mounted() {},
    onHide() {
        this.courseList = [];
        this.keywords = "";
    },
    onUnload() {
        this.courseList = [];
        this.keywords = "";
    }
};
</script>

<style lang="less">
.search-course {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 0 40rpx;
    box-sizing: border-box;
    .search-box {
        position: relative;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        &-icon {
            display: inline-block;
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            left: 20rpx;
            flex: 0 0 auto;
        }
        .search-input {
            position: relative;
            top: 0;
            left: 0;
            width: auto;
            height: 60rpx;
            margin-right: 80rpx;
            border: 1px solid #ccc;
            border-radius: 30px;
            color: #808080;
            font-size: 28rpx;
            text-align: left;
            padding-left: 60rpx;
            flex: 1;
        }
        .search-cancel {
            position: absolute;
            top: 0;
            right: 0;
            width: auto;
            height: 60rpx;
            line-height: 60rpx;
            color: #808080;
            font-size: 28rpx;
            flex: 0 0 auto;
        }
    }
    /*
  * 热门搜索
  */
    .hot-search {
        position: relative;
        top: 40rpx;
        left: 0;
        .title {
            font-size: 32rpx;
            color: #333333;
        }
        .search-hot-tag {
            display: inline-block;
            float: left;
            padding: 10rpx 20rpx;
            margin: 30rpx 30rpx 0 0;
            border: 1px solid #ccc;
            border-radius: 5rpx;
            color: #808080;
            white-space: wrap;
            font-size: 24rpx;
        }
    }
    /*
  * 课程列表
  */
    .course-list {
        position: relative;
        top: 80rpx;
        left: 0;
        .title {
            font-size: 32rpx;
            color: #333333;
            margin-bottom: 30rpx;
        }
    }
    .none {
        text-align: center;
    }
}
</style>